@use 'sass:map';
@use 'node_modules/@angular/material' as mat;
@use '@gravitee/ui-particles-angular' as gio;

@use '../../../scss/gio-layout' as gio-layout;

$typography: map.get(gio.$mat-theme, typography);
$background: map.get(gio.$mat-theme, background);

:host {
  @include gio-layout.gio-responsive-margin-container;
}

.org-settings-notification-templates {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  &__content {
    // Hack to match place not used by the Table of Content
    // Classic flex setup aren't working because of list's mat-line
    width: 81%;

    &__card {
      margin-bottom: 32px;
    }

    &__list {
      &__item {
        cursor: pointer;
        &:hover {
          background-color: mat.get-color-from-palette($background, hover);
        }
      }
    }
  }
}
